<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>速度中国工时系统</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/build/css/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/easyui.css">
    <link rel="stylesheet" type="text/css" href="/css/my-style.css">
</head>
<style>
    .layui-layer-setwin .layui-layer-max {
        display: none;
    }
</style>

<body>
<div class="kit-doc">

    <div class="layui-card layui-card-body">
        <!-- 表格增删改查btn -->
        <shiro:hasPermission name="system:dept:add">
            <div class="layui-btn-group layui-m-b-5">
                <button class="layui-btn layui-btn-sm" id="modal1"><i class="fa fa-plus"></i>&nbsp;增加
                </button>
            </div>
        </shiro:hasPermission>

        <div class="test-tree-table" lay-filter="test1"></div>
    </div>

</div>
<!-- 弹框content01 -->
<div id="modal-content1" style="display: none; padding:20px;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">部门名</label>
            <div class="layui-input-block">
                <input type="text" name="deptName" required lay-verify="required"
                       placeholder="请输入部门名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <input name="parentId" type="hidden" id="treeId"/>
        <div class="layui-form-item">
            <label class="layui-form-label">父级部门名：</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="parentdeptName"
                       onclick="selectDeptTree()" lay-verify="required"
                       readonly="true" id="treeName">
            </div>
        </div>

        <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">部门排序</label>-->
        <!--<div class="layui-input-block">-->
        <!--<input type="number" name="orderNum" required lay-verify="required"-->
        <!--placeholder="请输入部门" autocomplete="off" class="layui-input">-->
        <!--</div>-->
        <!--</div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">负责人</label>
            <div class="layui-input-block">
                <input type="text" name="leader"lay-verify="required"
                       placeholder="请输入负责人" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系方式</label>
            <div class="layui-input-block">
                <input type="text" name="phone"required
                       placeholder="请输入电话号码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电子邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email"
                       placeholder="请输入email" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block modal-footer">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script src="../../static/plugins/layui/layui.js" th:src="@{/plugins/layui/layui.js}"></script>
<script type="text/javascript" src="../../static/js/jquery.min.js"
        th:src="@{/js/jquery.min.js}"></script>
<script src="/js/ry-ui.js"></script>
<script>
    //所有父级部门
    $(function () {
        $.ajax({
            type: "GET",//请求方式
            url: "/system/dept/getParentDept",//地址，就是json文件的请求路径
            dataType: "json",//数据类型可以为 text xml json  script  jsonp
            success: function (result) {//返回的参数就是 action里面所有的有get和set方法的参数
                for (var i = 0; i < result.length; i++) {
                    $("#parentId").append("<option value='" + result[i].id + "'>" + result[i].deptName + "</option>");

                }
            }
        });

    });
</script>
<!--展示树形部门表-->
<script type="text/javascript">
    layui.config({
        base: '/js/',
    })
    var data;
    layui.use(['treetable', 'table', 'form'], function () {
        var table = layui.table;
        var $ = layui.$, treetable = layui.treetable;

        $.ajax({
            type: "GET",//请求方式
            async: false,
            url: "/system/dept/getAll",//地址，就是json文件的请求路径
            dataType: "json",//数据类型可以为 text xml json  script  jsonp
            success: function (result) {//返回的参数就是 action里面所有的有get和set方法的参数
                data = result;
            }

        });
        treetable.render({
            elem: '.test-tree-table',
            data: data,
            field: 'deptName',
            cols: [

                {
                    field: 'deptName',
                    title: '部门名称',
                    width: '20%'
                },
                {
                    field: 'leader',
                    title: '领导',
                    width: '10%'
                },
                {
                    field: 'phone',
                    title: '部门电话',
                    width: '10%'
                },
                {
                    field: 'email',
                    title: '部门邮箱',
                    width: '10%'
                },
                {
                    field: 'actions',
                    title: '操作',
                    width: '30%',
                    data: [
                        '<a href="#" onclick="editDept(this)">编辑</a>', '<a href="#" onclick="deleteDept(this)">删除</a>',
                    ],
                },

            ]
        });
    });

    /**
     * 编辑部门
     * @param btn
     */
    function editDept(btn) {
        // 当前行的id
        var id = $(btn).parent().parent().parent().attr("data-tb-id");

        /**
         * 向后台请求更新
         */
        $.modal.open("内容修改", "/system/dept/update/" + id);
    }

    /**
     * 删除
     */
    function deleteDept(btn) {
        // 当前行的id
        var id = $(btn).parent().parent().parent().attr("data-tb-id");
        /**
         * 向后台请求更删除
         */
        layer.confirm('确定删除当前行吗？', function (index) {
            layer.close(index);
            //向服务端发送删除指令
            layui.$.ajax({
                type: 'DELETE',
                url: "/system/dept/del/" + id,
                success: function (res) {
                    layer.closeAll();
                    if (res.code == 0) {
                        layer.msg("删除成功");
                    } else {
                        layer.msg("删除失败" + res.msg);
                    }
                }
            });

        });
        setTimeout(function () {  //使用  setTimeout（）方法设定定时2000毫秒
            window.location.reload();//页面刷新
        }, 2000);
        console.log(data, id);
    }


</script>
<!-- 表单 -->
<script>

    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

    });
</script>

<!--弹框-->
<script>
    $('#modal1').on('click', function () {
        layer.open({
            title: "内容添加",
            type: 1,
            content: $("#modal-content1"),
            area: ['40%', '60%'],
            shadeClose: true,
            end: function () {
                //关闭窗口时清空表单内容
                $("#modal-content1").find('input[type=text],select,textarea,input[type=hidden]').each(function () {
                    $(this).val('');
                });

            }
        });
    });
    $('#modal2').on('click', function () {
        layer.open({
            title: "用户设置",
            type: 1,
            content: $("#modal-content2"),
            area: ['40%', '60%'],
            shadeClose: true,
            end: function () {
                //关闭窗口时清空表单内容
                $("#modal-content2").find('input[type=text],select,textarea,input[type=hidden]').each(function () {
                    $(this).val('');
                });

            }
        });
    });
    $('#modal3').on('click', function () {
        layer.open({
            title: "用户设置",
            type: 1,
            content: $("#modal-content3"),
            area: ['40%', '60%'],
            shadeClose: true,
            end: function () {
                //关闭窗口时清空表单内容
                $("#modal-content3").find('input[type=text],select,textarea,input[type=hidden]').each(function () {
                    $(this).val('');
                });

            }
        });
    });
    var message;
    layui.config({
        base: 'build/js/'
    }).use(['app', 'message'], function () {
        var $ = layui.jquery,
            layer = layui.layer;
        //将message设置为全局以便子页面调用


    });
</script>

<!-- tree -->
<script type="text/javascript">
    function getChecked() {
        var nodes = $('#tt').tree('getChecked');
        var s = '';
        for (var i = 0; i < nodes.length; i++) {
            if (s != '') s += ',';
            s += nodes[i].text;
        }
        alert(s);
    }
</script>

<script>
    // 增加项目表单
    layui.use(['form', 'layedit', 'laydate', 'jquery'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听指定开关
        form.on('switch(switchStatus)', function (data) {
            this.value = this.checked ? "0" : "1";
        });


        var $ = layui.$;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            $.ajax({
                type: 'POST',
                url: "/system/dept/add",
                data: data.field,
                success: function (res) {
                    // console.log(res);
                    layer.closeAll();
                    if (res.code == 0) {
                        layer.msg("新增成功");
                        window.location.reload();
                    } else {
                        layer.msg("新增失败" + data.msg);
                    }
                }
            });
            setTimeout(function () {  //使用  setTimeout（）方法设定定时2000毫秒
                window.location.reload();//页面刷新
            }, 2000);
            console.log(data, id);
            return false;
        });
    });
</script>
<script>
    /*部门管理-新增-选择部门树*/
    function selectDeptTree() {
        var treeId = $("#treeId").val();
        var deptId = treeId == null || treeId == "" ? "100" : treeId;
        var url = "/system/dept/selectDeptTree/" + deptId;
        // layer.open("选择部门", url, '380', '380');
        layer.open({
            title: "选择部门",
            type: 2,
            content: url,
            area: ['22%', '45%'],
            shadeClose: true
        });
    }
</script>
</body>
</html>